<template>
  <!-- 面包屑导航 -->
    <div style="margin-top: 20px; margin-left: 20px">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item><b>我的课堂</b></el-breadcrumb-item>
            <el-breadcrumb-item @click=" router.push('/classStart/teacherCourseInfo')">课程信息</el-breadcrumb-item>
            <el-breadcrumb-item>查看课程学生页面</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
  <!-- 表格 -->
    <div class="table-container">
        <el-table :data="tableData" stripe style="width: 100%;">
            <el-table-column prop="snumber" label="学号" />
            <el-table-column prop="sname" label="姓名"/>
            <el-table-column prop="sphone" label="手机号"  />
            <el-table-column prop="major" label="专业名称"  />
            <el-table-column prop="classname" label="班级"  />
        </el-table>
    </div>
  <!-- 分页按钮 -->
    <div class="demo-pagination-block">
        <el-pagination
                v-model:current-page="pagination.currentPage"
                v-model:page-size="pagination.pageSize"
                :page-sizes="[5, 10, 15, 20]"
                :total="pagination.total"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        />
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import request8090 from "../../../../utils/request8090.js";
import router from "../../../../router/index.js";

const tableData = ref([]);
//初始化的默认分页大小
const pagination = ref({
    currentPage: 1,
    pageSize: 10,
    total: 0
});
onMounted(() => {
    fetchCourseStudents()
});
// 获取签到信息
const fetchCourseStudents = () => {
    request8090({
        url: '/teacher/getstudents',
        method: 'GET',
        params: { currentPage: pagination.value.currentPage, size: pagination.value.pageSize, courseNumber: sessionStorage.getItem("courseNumber") },
    })
        .then(res => {
            if (res.data.errorCode === 200) {
                tableData.value = res.data.data.records;
                pagination.value.total = res.data.data.total;
            } else {
                ElMessage.error('获取数据失败');
            }
        })
        .catch(error => {
            console.error('请求失败:', error);
            ElMessage.error('请求失败');
        });

}
//显示行数大小改变时刷新页面
const handleSizeChange = (size) => {
    pagination.value.pageSize = size;
    fetchCourseStudents();
}
//显示页数改变时刷新页面
const handleCurrentChange = (page) => {
    pagination.value.currentPage = page;
    fetchCourseStudents();
}
</script>

<style scoped>

</style>